<template>
  <el-card class="menu-card" shadow="never">
    <template v-for="item in menu" :key="item.id">
      <router-link :to="item.path">
        <div :class="{ active: item.id === currentPage }">{{ item.name }}</div>
      </router-link>
    </template>
  </el-card>
</template>

<script setup>
defineProps({
  menu: Object,
  currentPage: String
})
</script>
<style lang="scss" scoped>
.el-row {
  padding: 1.8rem;
  .el-card {
    text-align: center;
    cursor: pointer;
  }
}
::v-deep(.el-card__body) {
  display: flex;
  justify-content: center;
  align-items: center;
  a {
    display: block;
    text-align: center;
    width: 16.6%;
  }
  a:hover {
    color: var(--el-color-primary);
  }
}
.router-link-active {
  position: relative;
  color: var(--el-color-primary);
  &::after {
    content: '';
    position: absolute;
    bottom: -2rem;
    left: 40%;
    width: 20%;
    height: 0.5rem;
    background-color: var(--el-color-primary);
    border-radius: 0.3rem;
  }
}
</style>
